<template>
  <el-autocomplete
    popper-class="my-autocomplete"
    v-model="state"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
    @input="inputHandle">
    <i class="el-icon-edit el-input__icon" slot="suffix">
    </i>
    <template slot-scope="{ item }">
      <div class="name">{{ item.value }}</div>
      <!-- <span class="addr">{{ item.label }}</span> -->
    </template>
  </el-autocomplete>
</template>

<script>
  import { remote } from '@/api/admin/dict'
  export default {
    props: ["data"],
      data() {
        return {
          restaurants: [],
          state: ''
        };
      },
      methods: {
        querySearch(queryString, cb) {
          var restaurants = this.restaurants;
          var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
          // 调用 callback 返回建议列表的数据
          cb(results);
        },
        createFilter(queryString) {
          return (restaurant) => {
            return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
          };
        },
        inputHandle(val) {
          this.$emit('success',val)
        }
      },
      mounted() {
        remote(this.data).then(response => {
          this.restaurants = response.data.data
        })
      }
    }
</script>

<style lang="scss" scoped>
  .my-autocomplete {
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .addr {
        font-size: 12px;
        color: #b4b4b4;
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }
</style>
